'use strict'

class UI {
    #player = null;
    #listContainer = document.getElementById('playlist');

    constructor() {
        this.#player = new AudioPlayer(document.getElementById('info'),
                                       document.getElementById('playBtn'),
                                       document.getElementById('canvas'),
                                       document.getElementById('mirror'),
                                       this.#listContainer,
                                       this.disableControl,
                                       this.enableControl
        );
        var that = this;
        DB.getInstance(function(){
            that.#init();
        });
    }

    disableControl() {
        var overlay = document.createElement('div'),
            loader = document.createElement('div'),
            controlPanel = document.getElementsByClassName('control')[0],
            i = 0;
        overlay.className = 'overlay';
        loader.className = 'loader';
        while (i < 5) {
            var circle = document.createElement('div');
            circle.className = 'circle';
            loader.appendChild(circle);
            i++;
        }
        overlay.appendChild(loader);
        controlPanel.appendChild(overlay);
    }

    enableControl() {
        var overlay = document.getElementsByClassName('overlay')[0],
            controlPanel = document.getElementsByClassName('control')[0];
        controlPanel.removeChild(overlay);
    }

    #init() {
        // init play list
        let playList = JSON.parse(localStorage.getItem("playlist")||"[]");
        this.#addToList(playList);

        var that = this,
            addBtn = document.getElementById('addFiles'),
            emptyBtn = document.getElementById('emptyList'),
            preBtn = document.getElementById('preBtn'),
            playBtn = document.getElementById('playBtn'),
            nextBtn = document.getElementById('nextBtn'),
            closeBtn = document.getElementById('close'),
            showControlBtn = document.getElementById('showControl');
        //listen the file upload
        addBtn.onchange = function() {
            that.#addToList(addBtn.files);
        }
        //clear the play list
        emptyBtn.onclick = function() {
            that.#emptyList();
        }
        //listen pre button
        preBtn.onclick = function() {
            that.#player.playPre();
        }
        //listen play button
        playBtn.onclick = function() {
            that.#player.togglePlay();
        }
        //listen next button
        nextBtn.onclick = function() {
            that.#player.playNext();
        }
        //close button
        closeBtn.onclick = function() {
            document.getElementsByClassName('control')[0].style.left = "-100%";
            if (document.getElementsByClassName('overlay')[0]) {
                document.getElementsByClassName('overlay')[0].style.left = "-100%";
            };
        }
        //show control button
        showControlBtn.onclick = function() {
            document.getElementsByClassName('control')[0].style.left = "-1px";
            if (document.getElementsByClassName('overlay')[0]) {
                document.getElementsByClassName('overlay')[0].style.left = "-1px";
            };
        }
        //play selected entry from the playlist
        this.#listContainer.onclick = function(e) {
            var selectedIndex = that.#getSlectedIndex(e.target);
            if (e.target.className === 'title') {
                console.info("play selected item:", selectedIndex);
                that.#player.play(selectedIndex);
            } else if (e.target.className === 'remove') {
                // remove selected item
                that.#player.removeFromList(selectedIndex, e.target.parentNode);
            };
        }
    }

    
    #getSlectedIndex(target) {
        var li = target.parentNode,
            index = 0;
        while (li.previousElementSibling) {
            li = li.previousElementSibling;
            index += 1;
        }
        return index;
    }

    #addToList(files) {
        var songs = [];
        var docFragment = document.createDocumentFragment(); //use docfragment to improve the performance
        for (var i = 0; i < files.length; i++) {
            let file = files[i];
            var song = {};
            if (file instanceof File) {
                song["file"] = file;
                song["hash"] = null;
                song["name"] = file.name;
                song["volume"] = 100;
            } else {
                song = file;
            }
            songs.push(song);
            var li = document.createElement("li");
            li.innerHTML = '<span class="remove" title="remove from list">X</span>' + '<span class="title">' + song.name.replace(/\.[^/.]+$/, "") + '</span>';
            docFragment.appendChild(li);
        };
        this.#listContainer.appendChild(docFragment); //add entries to the playlist
        for (let song of songs) {
            this.#player.addToList(song);
        }
    }

    #emptyList() {
        this.#player.emptyList();
        this.#listContainer.innerHTML = '';
    }
}

window.onload = function() {
    new UI();
}